<template>
  <button @click="isShow = !isShow">切换组件</button>
  <hr />
  <!-- 如果 isShow 为 true 就显示 A 组件，否则显示 B 组件 -->
  <component :is="isShow ? A : B"></component>
  <KeepAlive>
    <component :is="isShow ? A : B"></component>
  </KeepAlive>
</template>
 
<script setup>
import { defineAsyncComponent } from 'vue';
// 引入组件
const A = defineAsyncComponent(() => import('./components/App1201.vue'))
const B = defineAsyncComponent(() => import('./components/App1202.vue'))
// 引入 ref 函数
import { ref } from 'vue';
const isShow = ref(true);
</script>